<template>
	<view :class="doublerowShow ? 'goods-view-double' : 'goods-view-single'">
		<view class="goods-view">
		    <view class="goods-img">
		        <u-image v-if="!doublerowShow" width="240" height="240" :src="goodsImg" :border-radius="10"></u-image>
		        <u-image v-else width="340" height="340" :src="goodsImg" :border-radius="10"></u-image>
		    </view>
		    <view class="goods-info">
		        <view class="goods-title-view u-line-2">
		            <text class="self u-m-r-10" v-if="selfOperated">自营</text>
                    <text style="font-weight: 500;vertical-align: middle;font-size: 31rpx;">{{goodsName}}</text>
		        </view>
		        <view class="goods-price-view">
		            <custom-price :price="goodsPrice" :size="32" :fontWeight="600"></custom-price>
		        </view>
		        <view class="goods-comments">
                    <text class="u-m-r-20"  v-if="goodsBuyCount!=-1">{{ goodsBuyCount || 0 }}人已购买</text>
                    <text  v-if="goodsCommentNum!=-1">{{ goodsCommentNum || 0 }}条评论</text>
		        </view>
               <view class="goods-comments" v-if="goodsSellerName">
                    <!-- <u-icon name="shop" custom-prefix="custom-icon" size="35" class="custom-icon"></u-icon> -->
                    <text> {{ goodsSellerName }}</text>
                </view>
		    </view>
		</view>
	</view>
</template>

<script>
    /**
     * 商品Cell组件-2
     *
     * ===== 使用场景 ======
     * 搜索结果页、我的收藏
     *
     * ===== 参数 =====
     * goodsName        商品名称
     * goodsPrice       商品金额
     * goodsImg         商品图片
     * goodsBuyCount    商品购买数量 ，如果为-1则不显示
     * goodsCommentNum  商品评价数量  ，如果为-1则不显示
     * doublerowShow    双排显示
     * goodsSellerName  店铺名称，如果为空则不显示
     * selfOperated     是否是自营店铺商品
     */
	export default {
		props:{
		    goodsName: {
		        type: String,
		        default: '默认名称'
		    },
		    goodsPrice: {
		        type: Number,
		        default: 0
		    },
		    goodsImg: {
		        type: String,
		        default: ''
		    },
            goodsBuyCount: {
                type: Number,
                default: 0
            },
            goodsCommentNum: {
                type: Number,
                default: 0
            },
            doublerowShow: {
                type: Boolean,
                default: false
            },
            goodsSellerName: {
                type: String,
                default: ''
            },
            selfOperated: {
                type: Number,
                default: 0
            }
		},
	}
</script>

<style lang="scss">
    .goods-view-single {
        .goods-view {
            display: flex;
            flex-direction: row;
            padding: 10rpx 20rpx;
            background-color: #FFFFFF;
            .goods-info {
                flex: 1;
                margin-left: 20rpx;
                padding-bottom: 10rpx;
                // border-bottom: 2rpx solid #F4F4F4;

                .goods-price-view {
                    margin: 55rpx 0 10rpx 0;
                }
                .goods-comments {
                    font-size: 25rpx;
                    color: #82848A;
                }
                .custom-icon {
                    float: left;
                }
                .u-margin-left-10 {
                    float: left;
                    font-size: 28rpx;
                    color: #000;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
    .goods-view-double {
        border-radius: 20rpx;
        .goods-info {
            margin: 20rpx;
            .goods-price-view {
                margin: 10rpx 0;
            }
            .goods-title-view {
                height: 84rpx;
            }
            .goods-comments {
                font-size: 23rpx;
                color: #82848A;
                margin: 20rpx 0;
                display: flex;
            }
            .u-margin-left-10 {
                font-size: 28rpx;
                color: #000;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
    }
</style>
